<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>使用圆弧生成器</title>
        <script src="https://d3js.org/d3.v5.min.js"></script>
	</head>
	<body>
		
		<script>
			
			const width = 400, height = 400, fullAngle = 2 * Math.PI, colors = d3.scaleOrdinal(d3.schemeCategory10)
			
			const svg = d3.select('body')
						  .append('svg')
						  .attr('class', 'pie')
						  .attr('height', height)
						  .attr('width', width)
			
			function render(innerRadius, endAngle) {
				
				if(!endAngle) endAngle = fullAngle
				
				const data = [
					{startAngle: 0, endAngle: 0.2 * endAngle},
					{startAngle: 0.2 * endAngle, endAngle: 0.5 * endAngle},
					{startAngle: 0.5 * endAngle, endAngle: 0.8 * endAngle},
					{startAngle: 0.8 * endAngle, endAngle: 1 * endAngle}
				]
				
				const arc = d3.arc().outerRadius(200)
								    .innerRadius(innerRadius)
				
				svg.select('g').remove()
				
				// svg.append('g')
				//    .attr('transform', 'translate(200, 200)')
				//    .selectAll('path.arc')
				//    .data(data)
				//    .enter()
				//    .append('path')
				//    .attr('class', 'arc')
				//    .attr('fill', (d, i) => colors(i))
				//    .attr('d', (d, i) => arc(d))
				svg.append('g')
				   .attr('transform', 'translate(200, 200)')
				   .selectAll('path.arc')
				   .data(data)
				   .enter()
				   .append('path')
				   .attr('class', 'arc')
				   .attr('fill', (d, i) => colors(i))
				   .transition()
				   .duration(1000)
				   .attrTween('d', function(d) {
					   const start = {startAngle: 0, endAngle: 0}
					   const interpolate = d3.interpolate(start, d)
					   return function(t) {
						   return arc(interpolate(t))
					   }
				   })
				   
			}
			
			render(0)
			
		</script>
		
	</body>
</html>
 